import 'package:cached_network_image/cached_network_image.dart';
import 'package:card_swiper/card_swiper.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get.dart';
import 'package:sticky_headers/sticky_headers/widget.dart';
import 'package:yi_shop/route/index.dart';
import 'package:yi_shop/utils/colors.dart';
import 'package:yi_shop/utils/styles.dart';
import 'package:yi_shop/utils/svg.dart';

class HomeClassifyController extends GetxController {
  List<String> list = [
    '华为超薄笔记本matebook 14',
    '苹果 MacBook Pro 219',
    '小米 9',
    '荣耀 Pro 90',
    '华为 Mate Pro 60'
  ];

  List<String> categorys = ['推荐类目'];

  RxInt typeIndex = RxInt(0);

  List<String> topList = [
    'https://cbu01.alicdn.com/img/ibank/2019/804/227/12266722408_795737573.300x300.jpg',
    'https://cbu01.alicdn.com/img/ibank/O1CN01H3ucx72BTlynXcHYm_!!1835588340-0-cib.300x300.jpg',
    'https://img1.baidu.com/it/u=1247406224,3137556227&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=246',
    'https://img1.baidu.com/it/u=967649214,3977500688&fm=253&fmt=auto&app=138&f=JPG?w=800&h=250',
    'https://img2.baidu.com/it/u=967150179,895916412&fm=253&fmt=auto&app=138&f=JPEG?w=853&h=500'
  ];

  @override
  void onInit() {
    initCategory();
    super.onInit();
  }

  void initCategory() {
    for (var i = 1; i < 16; i++) {
      categorys.add('类目$i');
    }
  }
}

class HomeClassifyView extends GetView<HomeClassifyController> {
  const HomeClassifyView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false,
        title: Container(
          height: 35,
          width: 300,
          padding: EdgeInsets.symmetric(horizontal: 10.w),
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(5.r),
              border: Border.all(
                color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorCccc),
              )),
          alignment: Alignment.centerLeft,
          child: Row(
            children: [
              SvgUtils.assetName('u3379', width: 20, height: 20),
              Expanded(
                  child: Container(
                padding: const EdgeInsets.only(left: 10),
                child: Swiper.list<String>(
                    list: controller.list,
                    loop: true,
                    autoplay: true,
                    duration: 1000,
                    autoplayDelay: 5000,
                    itemHeight: 35,
                    scrollDirection: Axis.vertical,
                    builder: (_, str, index) {
                      return Align(
                        alignment: Alignment.centerLeft,
                        child: Text(
                          str,
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                          style: StylesUtils.customTextStyle(color: ColorsUtils.color9999),
                        ),
                      );
                    }),
              ))
            ],
          ),
        ),
        centerTitle: true,
        backgroundColor: Colors.white,
        elevation: 0,
        systemOverlayStyle: SystemUiOverlayStyle.dark,
      ),
      body: Row(
        children: [
          Container(
            width: 70,
            color: Colors.white,
            child: ListView.builder(
              itemBuilder: (_, index) {
                return InkWell(
                  onTap: () {
                    controller.typeIndex.value = index;
                  },
                  child: Container(
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        border: Border(
                            bottom: BorderSide(
                                color:
                                    ColorsUtils.parseColorFromHexString(ColorsUtils.colorF2f2)))),
                    child: Obx(() => Text(
                          controller.categorys[index],
                          style: StylesUtils.customTextStyle(
                              fontSize: StylesUtils.fontSize13,
                              color: controller.typeIndex.value == index
                                  ? ColorsUtils.colorF048
                                  : ColorsUtils.color3333),
                        )),
                  ),
                );
              },
              itemCount: controller.categorys.length,
              itemExtent: 50,
            ),
          ),
          Expanded(
              child: ListView(
            padding: const EdgeInsets.only(left: 10, right: 20),
            children: [
              StickyHeader(
                header: SizedBox(
                  height: 90,
                  child: Swiper.children(
                      autoplay: true,
                      duration: 500,
                      autoplayDelay: 5000,
                      itemHeight: 90,
                      pagination: SwiperPagination(
                          builder: DotSwiperPaginationBuilder(
                              activeColor: Colors.white,
                              color: ColorsUtils.parseColorFromHexString(ColorsUtils.color6666),
                              size: 10.w,
                              activeSize: 10.w),
                          alignment: Alignment.bottomCenter),
                      children: controller.topList
                          .map((e) => CachedNetworkImage(
                                imageUrl: e,
                                width: 280,
                                height: 90,
                                fit: BoxFit.fitWidth,
                              ))
                          .toList()),
                ),
                content: Container(),
              ),
              StickyHeader(
                  header: Container(
                    height: 40,
                    color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF2f2),
                    alignment: Alignment.centerLeft,
                    child: Text(
                      '推荐专场',
                      style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                    ),
                  ),
                  content: Container(
                    padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 13),
                    color: Colors.white,
                    child: StaggeredGrid.count(
                      crossAxisCount: 3,
                      crossAxisSpacing: 20,
                      mainAxisSpacing: 15,
                      children: [
                        InkWell(
                          onTap: () {
                            Get.toNamed(RoutePath.shopList);
                          },
                          child: Column(
                            children: [
                              ClipRRect(
                                borderRadius: BorderRadius.circular(5.r),
                                child: CachedNetworkImage(
                                  imageUrl:
                                      'https://cbu01.alicdn.com/img/ibank/2019/219/750/10729057912_468257191.300x300.jpg',
                                  width: 63.w,
                                  height: 55,
                                  fit: BoxFit.fill,
                                ),
                              ),
                              Container(
                                margin: EdgeInsets.only(top: 5.h),
                                alignment: Alignment.center,
                                child: Text(
                                  '专题名称',
                                  style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                                ),
                              )
                            ],
                          ),
                        ),
                        Column(
                          children: [
                            ClipRRect(
                              borderRadius: BorderRadius.circular(5.r),
                              child: CachedNetworkImage(
                                imageUrl:
                                    'https://cbu01.alicdn.com/img/ibank/O1CN01SFMdkI2D59r3BQGmm_!!2212790908557-0-cib.300x300.jpg',
                                width: 63.w,
                                height: 55,
                                fit: BoxFit.fill,
                              ),
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 5.h),
                              alignment: Alignment.center,
                              child: Text(
                                '专题名称',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                              ),
                            )
                          ],
                        ),
                        Column(
                          children: [
                            ClipRRect(
                              borderRadius: BorderRadius.circular(5.r),
                              child: CachedNetworkImage(
                                imageUrl:
                                    'https://cbu01.alicdn.com/img/ibank/18943751191_103304947.300x300.jpg',
                                width: 63.w,
                                height: 55,
                                fit: BoxFit.fill,
                              ),
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 5.h),
                              alignment: Alignment.center,
                              child: Text(
                                '专题名称',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                              ),
                            )
                          ],
                        )
                      ],
                    ),
                  )),
              StickyHeader(
                  header: Container(
                    height: 40,
                    alignment: Alignment.centerLeft,
                    color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF2f2),
                    child: Text(
                      '热门分类',
                      style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                    ),
                  ),
                  content: Container(
                    padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 13),
                    color: Colors.white,
                    child: StaggeredGrid.count(
                      crossAxisCount: 3,
                      crossAxisSpacing: 20,
                      mainAxisSpacing: 15,
                      children: [
                        Column(
                          children: [
                            ClipRRect(
                              borderRadius: BorderRadius.circular(5.r),
                              child: CachedNetworkImage(
                                imageUrl:
                                    'https://cbu01.alicdn.com/img/ibank/2019/219/750/10729057912_468257191.300x300.jpg',
                                width: 63.w,
                                height: 55,
                                fit: BoxFit.fill,
                              ),
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 5.h),
                              alignment: Alignment.center,
                              child: Text(
                                '专题名称',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                              ),
                            )
                          ],
                        ),
                        Column(
                          children: [
                            ClipRRect(
                              borderRadius: BorderRadius.circular(5.r),
                              child: CachedNetworkImage(
                                imageUrl:
                                    'https://cbu01.alicdn.com/img/ibank/O1CN01SFMdkI2D59r3BQGmm_!!2212790908557-0-cib.300x300.jpg',
                                width: 63.w,
                                height: 55,
                                fit: BoxFit.fill,
                              ),
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 5.h),
                              alignment: Alignment.center,
                              child: Text(
                                '专题名称',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                              ),
                            )
                          ],
                        ),
                        Column(
                          children: [
                            ClipRRect(
                              borderRadius: BorderRadius.circular(5.r),
                              child: CachedNetworkImage(
                                imageUrl:
                                    'https://cbu01.alicdn.com/img/ibank/18943751191_103304947.300x300.jpg',
                                width: 63.w,
                                height: 55,
                                fit: BoxFit.fill,
                              ),
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 5.h),
                              alignment: Alignment.center,
                              child: Text(
                                '专题名称',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                              ),
                            )
                          ],
                        ),
                        Column(
                          children: [
                            ClipRRect(
                              borderRadius: BorderRadius.circular(5.r),
                              child: CachedNetworkImage(
                                imageUrl:
                                    'https://cbu01.alicdn.com/img/ibank/2019/219/750/10729057912_468257191.300x300.jpg',
                                width: 63.w,
                                height: 55,
                                fit: BoxFit.fill,
                              ),
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 5.h),
                              alignment: Alignment.center,
                              child: Text(
                                '专题名称',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                              ),
                            )
                          ],
                        ),
                        Column(
                          children: [
                            ClipRRect(
                              borderRadius: BorderRadius.circular(5.r),
                              child: CachedNetworkImage(
                                imageUrl:
                                    'https://cbu01.alicdn.com/img/ibank/O1CN01SFMdkI2D59r3BQGmm_!!2212790908557-0-cib.300x300.jpg',
                                width: 63.w,
                                height: 55,
                                fit: BoxFit.fill,
                              ),
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 5.h),
                              alignment: Alignment.center,
                              child: Text(
                                '专题名称',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                              ),
                            )
                          ],
                        ),
                        Column(
                          children: [
                            ClipRRect(
                              borderRadius: BorderRadius.circular(5.r),
                              child: CachedNetworkImage(
                                imageUrl:
                                    'https://cbu01.alicdn.com/img/ibank/18943751191_103304947.300x300.jpg',
                                width: 63.w,
                                height: 55,
                                fit: BoxFit.fill,
                              ),
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 5.h),
                              alignment: Alignment.center,
                              child: Text(
                                '专题名称',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                              ),
                            )
                          ],
                        ),
                        Column(
                          children: [
                            ClipRRect(
                              borderRadius: BorderRadius.circular(5.r),
                              child: CachedNetworkImage(
                                imageUrl:
                                    'https://cbu01.alicdn.com/img/ibank/2019/219/750/10729057912_468257191.300x300.jpg',
                                width: 63.w,
                                height: 55,
                                fit: BoxFit.fill,
                              ),
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 5.h),
                              alignment: Alignment.center,
                              child: Text(
                                '专题名称',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                              ),
                            )
                          ],
                        ),
                        Column(
                          children: [
                            ClipRRect(
                              borderRadius: BorderRadius.circular(5.r),
                              child: CachedNetworkImage(
                                imageUrl:
                                    'https://cbu01.alicdn.com/img/ibank/O1CN01SFMdkI2D59r3BQGmm_!!2212790908557-0-cib.300x300.jpg',
                                width: 63.w,
                                height: 55,
                                fit: BoxFit.fill,
                              ),
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 5.h),
                              alignment: Alignment.center,
                              child: Text(
                                '专题名称',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                              ),
                            )
                          ],
                        ),
                        Column(
                          children: [
                            ClipRRect(
                              borderRadius: BorderRadius.circular(5.r),
                              child: CachedNetworkImage(
                                imageUrl:
                                    'https://cbu01.alicdn.com/img/ibank/18943751191_103304947.300x300.jpg',
                                width: 63.w,
                                height: 55,
                                fit: BoxFit.fill,
                              ),
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 5.h),
                              alignment: Alignment.center,
                              child: Text(
                                '专题名称',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                              ),
                            )
                          ],
                        ),
                        Column(
                          children: [
                            ClipRRect(
                              borderRadius: BorderRadius.circular(5.r),
                              child: CachedNetworkImage(
                                imageUrl:
                                    'https://cbu01.alicdn.com/img/ibank/2019/219/750/10729057912_468257191.300x300.jpg',
                                width: 63.w,
                                height: 55,
                                fit: BoxFit.fill,
                              ),
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 5.h),
                              alignment: Alignment.center,
                              child: Text(
                                '专题名称',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                              ),
                            )
                          ],
                        ),
                        Column(
                          children: [
                            ClipRRect(
                              borderRadius: BorderRadius.circular(5.r),
                              child: CachedNetworkImage(
                                imageUrl:
                                    'https://cbu01.alicdn.com/img/ibank/O1CN01SFMdkI2D59r3BQGmm_!!2212790908557-0-cib.300x300.jpg',
                                width: 63.w,
                                height: 55,
                                fit: BoxFit.fill,
                              ),
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 5.h),
                              alignment: Alignment.center,
                              child: Text(
                                '专题名称',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                              ),
                            )
                          ],
                        ),
                        Column(
                          children: [
                            ClipRRect(
                              borderRadius: BorderRadius.circular(5.r),
                              child: CachedNetworkImage(
                                imageUrl:
                                    'https://cbu01.alicdn.com/img/ibank/18943751191_103304947.300x300.jpg',
                                width: 63.w,
                                height: 55,
                                fit: BoxFit.fill,
                              ),
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 5.h),
                              alignment: Alignment.center,
                              child: Text(
                                '专题名称',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                              ),
                            )
                          ],
                        ),
                      ],
                    ),
                  )),
              StickyHeader(
                  header: Container(
                    height: 40,
                    alignment: Alignment.centerLeft,
                    color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF2f2),
                    child: Text(
                      '超级趋势',
                      style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                    ),
                  ),
                  content: Container(
                    padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 13),
                    color: Colors.white,
                    child: StaggeredGrid.count(
                      crossAxisCount: 3,
                      crossAxisSpacing: 20,
                      mainAxisSpacing: 15,
                      children: [
                        Column(
                          children: [
                            ClipRRect(
                              borderRadius: BorderRadius.circular(5.r),
                              child: CachedNetworkImage(
                                imageUrl:
                                    'https://cbu01.alicdn.com/img/ibank/2019/219/750/10729057912_468257191.300x300.jpg',
                                width: 63.w,
                                height: 55,
                                fit: BoxFit.fill,
                              ),
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 5.h),
                              alignment: Alignment.center,
                              child: Text(
                                '专题名称',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                              ),
                            )
                          ],
                        ),
                        Column(
                          children: [
                            ClipRRect(
                              borderRadius: BorderRadius.circular(5.r),
                              child: CachedNetworkImage(
                                imageUrl:
                                    'https://cbu01.alicdn.com/img/ibank/O1CN01SFMdkI2D59r3BQGmm_!!2212790908557-0-cib.300x300.jpg',
                                width: 63.w,
                                height: 55,
                                fit: BoxFit.fill,
                              ),
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 5.h),
                              alignment: Alignment.center,
                              child: Text(
                                '专题名称',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                              ),
                            )
                          ],
                        ),
                        Column(
                          children: [
                            ClipRRect(
                              borderRadius: BorderRadius.circular(5.r),
                              child: CachedNetworkImage(
                                imageUrl:
                                    'https://cbu01.alicdn.com/img/ibank/18943751191_103304947.300x300.jpg',
                                width: 63.w,
                                height: 55,
                                fit: BoxFit.fill,
                              ),
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 5.h),
                              alignment: Alignment.center,
                              child: Text(
                                '专题名称',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                              ),
                            )
                          ],
                        ),
                        Column(
                          children: [
                            ClipRRect(
                              borderRadius: BorderRadius.circular(5.r),
                              child: CachedNetworkImage(
                                imageUrl:
                                    'https://cbu01.alicdn.com/img/ibank/2019/219/750/10729057912_468257191.300x300.jpg',
                                width: 63.w,
                                height: 55,
                                fit: BoxFit.fill,
                              ),
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 5.h),
                              alignment: Alignment.center,
                              child: Text(
                                '专题名称',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                              ),
                            )
                          ],
                        ),
                        Column(
                          children: [
                            ClipRRect(
                              borderRadius: BorderRadius.circular(5.r),
                              child: CachedNetworkImage(
                                imageUrl:
                                    'https://cbu01.alicdn.com/img/ibank/O1CN01SFMdkI2D59r3BQGmm_!!2212790908557-0-cib.300x300.jpg',
                                width: 63.w,
                                height: 55,
                                fit: BoxFit.fill,
                              ),
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 5.h),
                              alignment: Alignment.center,
                              child: Text(
                                '专题名称',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                              ),
                            )
                          ],
                        ),
                        Column(
                          children: [
                            ClipRRect(
                              borderRadius: BorderRadius.circular(5.r),
                              child: CachedNetworkImage(
                                imageUrl:
                                    'https://cbu01.alicdn.com/img/ibank/18943751191_103304947.300x300.jpg',
                                width: 63.w,
                                height: 55,
                                fit: BoxFit.fill,
                              ),
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 5.h),
                              alignment: Alignment.center,
                              child: Text(
                                '专题名称',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                              ),
                            )
                          ],
                        ),
                        Column(
                          children: [
                            ClipRRect(
                              borderRadius: BorderRadius.circular(5.r),
                              child: CachedNetworkImage(
                                imageUrl:
                                    'https://cbu01.alicdn.com/img/ibank/2019/219/750/10729057912_468257191.300x300.jpg',
                                width: 63.w,
                                height: 55,
                                fit: BoxFit.fill,
                              ),
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 5.h),
                              alignment: Alignment.center,
                              child: Text(
                                '专题名称',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                              ),
                            )
                          ],
                        ),
                        Column(
                          children: [
                            ClipRRect(
                              borderRadius: BorderRadius.circular(5.r),
                              child: CachedNetworkImage(
                                imageUrl:
                                    'https://cbu01.alicdn.com/img/ibank/O1CN01SFMdkI2D59r3BQGmm_!!2212790908557-0-cib.300x300.jpg',
                                width: 63.w,
                                height: 55,
                                fit: BoxFit.fill,
                              ),
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 5.h),
                              alignment: Alignment.center,
                              child: Text(
                                '专题名称',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                              ),
                            )
                          ],
                        ),
                        Column(
                          children: [
                            ClipRRect(
                              borderRadius: BorderRadius.circular(5.r),
                              child: CachedNetworkImage(
                                imageUrl:
                                    'https://cbu01.alicdn.com/img/ibank/18943751191_103304947.300x300.jpg',
                                width: 63.w,
                                height: 55,
                                fit: BoxFit.fill,
                              ),
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 5.h),
                              alignment: Alignment.center,
                              child: Text(
                                '专题名称',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                              ),
                            )
                          ],
                        ),
                        Column(
                          children: [
                            ClipRRect(
                              borderRadius: BorderRadius.circular(5.r),
                              child: CachedNetworkImage(
                                imageUrl:
                                    'https://cbu01.alicdn.com/img/ibank/2019/219/750/10729057912_468257191.300x300.jpg',
                                width: 63.w,
                                height: 55,
                                fit: BoxFit.fill,
                              ),
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 5.h),
                              alignment: Alignment.center,
                              child: Text(
                                '专题名称',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                              ),
                            )
                          ],
                        ),
                        Column(
                          children: [
                            ClipRRect(
                              borderRadius: BorderRadius.circular(5.r),
                              child: CachedNetworkImage(
                                imageUrl:
                                    'https://cbu01.alicdn.com/img/ibank/O1CN01SFMdkI2D59r3BQGmm_!!2212790908557-0-cib.300x300.jpg',
                                width: 63.w,
                                height: 55,
                                fit: BoxFit.fill,
                              ),
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 5.h),
                              alignment: Alignment.center,
                              child: Text(
                                '专题名称',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                              ),
                            )
                          ],
                        ),
                        Column(
                          children: [
                            ClipRRect(
                              borderRadius: BorderRadius.circular(5.r),
                              child: CachedNetworkImage(
                                imageUrl:
                                    'https://cbu01.alicdn.com/img/ibank/18943751191_103304947.300x300.jpg',
                                width: 63.w,
                                height: 55,
                                fit: BoxFit.fill,
                              ),
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 5.h),
                              alignment: Alignment.center,
                              child: Text(
                                '专题名称',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                              ),
                            )
                          ],
                        ),
                      ],
                    ),
                  )),
            ],
          ))
        ],
      ),
    );
  }
}
